<script lang="ts">
import { defineComponent, reactive, computed, watch, ref } from "vue";
import { Popup, Cell, CellGroup, RadioGroup, Radio, Icon } from "vant";
import { AppModule } from "@/store/modules/app";
import { UserModule } from "@/store/modules/user";
import { getUserInfo } from "@/api";
import AppLanguage from "./AppLanguage.vue";
export default defineComponent({
    components: {
        [Popup.name]: Popup,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Icon.name]: Icon,
        AppLanguage,
    },
    setup() {
        const setat = reactive({
            open: false,
            // bg: require("@/assets/image/header_bg.png"),
            menuList: [
                {
                    title: "index",
                    name: "/index",
                    icon: "wap-home-o",
                },
                {
                    title: "information",
                    name: "/information",
                    icon: "description-o",
                },
                {
                    title: "digitalCurrencyMarket",
                    name: "/digitalCurrencyMarket",
                    icon: "smile-comment-o",
                },
                {
                    title: "digitalCurrencyInformation",
                    name: "/digitalCurrencyInformation",
                    icon: "bookmark-o",
                },
                {
                    title: "invest",
                    name: "/invest",
                    icon: "cash-back-record-o",
                },
                {
                    title: "game",
                    name: "/game",
                    icon: "medal-o",
                },
                {
                    title: "mining",
                    name: "/mining",
                    icon: "gold-coin-o",
                },
                {
                    title: "swap",
                    name: "/swap",
                    icon: "expand-o",
                },
                {
                    title: "user",
                    name: "/user",
                    icon: "manager-o",
                },
                {
                    title: "leader",
                    name: "/leader",
                    icon: "friends-o",
                },
            ],
        });
        const pageLoading = ref(true)
        const userInfo = ref({})

        const loadData = async () => {
            pageLoading.value = true
            userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return { setat, AppModule, userInfo };
    },
});
</script>
<template>
    <van-popup v-model:show="setat.open" position="right" :duration="0.2" close-icon="arrow-left"
        close-icon-position="top-left" closeable :style="{
            height: '100%',
            width: '60%',
            background: `#f6f8f7  url(${setat.bg})  top / cover no-repeat`,
        }">
        <div class="menu-wrap">
            <div class="logo">
                <img src="@/assets/logo.png" alt="" srcset="" />
            </div>
            <div class="menu">
                <template v-for="(item, i) in setat.menuList">
                    <div class="row" v-if="item.title != 'leader'">
                        <router-link :to="item.name" class="title" @click="setat.open = false">
                            <van-icon :name="item.icon" />
                            {{ $t("menu." + item.title) }}</router-link>
                    </div>
                    <div class="row" v-else-if="item.title == 'leader' && userInfo.Leader == 1">
                        <router-link :to="item.name" class="title" @click="setat.open = false">
                            <van-icon :name="item.icon" />
                            {{ $t("menu." + item.title) }}</router-link>
                    </div>
                </template>
            </div>
        </div>
    </van-popup>
    <app-language ref="language" />
</template>

<style lang="less" scoped>
.menu-wrap {
    padding: 30px 0;

    .logo {
        height: 40px;
        margin: 0 auto;
        text-align: center;

        img {
            margin-top: 15px;
            display: inline-block;
            height: 100%;
        }
    }

    .menu {
        margin-top: 20px;

        .row {
            position: relative;

            .title {
                padding: 12px 0 12px 30px;
                display: flex;
                align-items: center;
                line-height: 20px;
                font-size: 16px;
                font-weight: 400;
                // color: #fff;

                // font-family: FZBeiWeiKaiShu-Z15T;
                .van-icon {
                    font-size: 20px;
                    // color: #fff;
                    margin-right: 10px;
                }

                &.router-link-exact-active {
                    color: #fff;
                    background: rgba(11, 166, 98, 1);
                }
            }

            svg {
                margin-right: 10px;
                // color: #fff;
                // fill: #fff;
                width: 20px;
                height: 20px;
            }

            .children {
                ul {
                    li {
                        a {
                            padding: 12px 0 12px 55px;
                        }
                    }
                }
            }

            &:after {
                position: absolute;
                content: "";
                left: 30px;
                right: 30px;
                border-bottom: 1px solid rgba(60, 46, 17, 0.3);
                z-index: -1;
            }
        }
    }
}
</style>
